<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ADK Bidi-streaming Demo</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/app.js" type="module"></script>
  </head>

  <body>
    <header>
      <h1>ADK Bidi-streaming Demo</h1>
      <div class="subtitle">Real-time bidirectional streaming with Google ADK</div>
      <div class="connection-status">
        <span class="status-indicator" id="statusIndicator"></span>
        <span id="statusText">Connecting...</span>
      </div>
    </header>

    <div class="main-layout">
      <div class="container">
        <div id="messages"></div>

        <div class="input-container">
          <form id="messageForm">
            <div class="input-wrapper">
              <input
                type="text"
                id="message"
                name="message"
                placeholder="Type your message here..."
                autocomplete="off"
              />
              <button type="submit" id="sendButton" disabled>Send</button>
              <button type="button" id="startAudioButton">Start Audio</button>
              <button type="button" id="cameraButton">📷 Camera</button>
            </div>
          </form>
        </div>
      </div>

      <div class="console-panel">
        <div class="console-header">
          <h2>Event Console</h2>
          <button id="clearConsole" class="console-clear-btn">Clear</button>
        </div>
        <div id="consoleContent" class="console-content"></div>
      </div>
    </div>

    <!-- Camera Preview Modal -->
    <div id="cameraModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>Camera Preview</h3>
          <button id="closeCameraModal" class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <video id="cameraPreview" autoplay playsinline></video>
        </div>
        <div class="modal-footer">
          <button id="cancelCamera" class="btn-secondary">Cancel</button>
          <button id="captureImage" class="btn-primary">📷 Send Image</button>
        </div>
      </div>
    </div>
  </body>
</html>
